import React, { Component } from 'react'
import { Form, Input, Button, message, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// 登录表接口
import { doLogin } from '@/api'
/* 引入css */
import imgUrl from '../../assets/imgs/6.jpg'
import './login.css'
export default class Login extends Component {
  render() {
    const layout = {
      wrapperCol: { offset:2,  span: 20 },
    };
    const tailLayout = {
      wrapperCol: { offset: 2, span: 20 },
    };
    return (
      <div
        className="box"
        style={{
          backgroundImage: 'url(' + imgUrl + ')',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundSize: 'cover'
        }}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={this.login}
        >
          <h1 style={{ color: 'red' }}>欢迎登录react文章后台管理系统</h1>
          <Form.Item
            {...layout}
            name="username"
            rules={[{ required: true, message: '请输入您的用户名喔!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
          </Form.Item>
          <Form.Item
            {...tailLayout}
            name="password"
            rules={[{ required: true, message: '请输入您的密码喔!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="http://localhost:3000/login">忘记了密码，呜呜呜哇...</a>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">登录了喔</Button>
            <a href="http://localhost:3000/login">现在注册吧！</a>
          </Form.Item>
        </Form>
      </div>
    )
  };
  /* params参数包含输入的用户名和密码 */
  login = (params) => {
    doLogin(params).then(res => {
      /* 200登录成功 */
      if (res.data.code === 200) {
        // 将返回数据存储，储存登录的信息
        localStorage.setItem('token', res.data.data.token);
        /* 用户信息 */
        localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo));
        /* 用户角色 */
        localStorage.setItem('role', res.data.data.userInfo.role);
        // 弹出提示
        message.success(res.data.msg, 2, () => {
          // 跳转到/admin/dashBoard页
          this.props.history.replace('/admin/dashBoard')
        })
      }
    })
  }
}
